$(function() {
	$('.small-image-list .item').first().addClass('active');

	$('.small-image-list .item').on('mouseenter', function() {
		$(this).addClass('active').siblings().removeClass('active');
		$('.big-image').find('img').attr('src', $(this).find('img').attr('src'));
		$('.big-image').find('img').attr('xoriginal', $(this).find('img').attr('src'));
	})

	$('.before').on('click', function() {
		if ($(window).width() < 751) {
			const width = $('.small-image-list-inner .active').width() + 7;
			$('.small-image-list').animate({
				scrollLeft: $('.small-image-list').scrollLeft() + width
			}, 300)
		} else {
			const height = $('.small-image-list-inner .active').height() + 7;
			$('.small-image-list').animate({
				scrollTop: $('.small-image-list').scrollTop() + height
			}, 300)
		}
	})

	$('.after').on('click', function() {
		if ($(window).width() < 751) {
			const width = $('.small-image-list-inner .active').width() + 7;
			$('.small-image-list').animate({
				scrollLeft: $('.small-image-list').scrollLeft() - width
			}, 300)
		} else {
			const height = $('.small-image-list-inner .active').height() + 7;
			$('.small-image-list').animate({
				scrollTop: $('.small-image-list').scrollTop() - height
			}, 300)
		}
	})

	 
	 $('.jqzoom').xzoom({tint: '#006699', Xoffset: 15});
	 $(window).on('resize', function() {
		 $('.jqzoom').xzoom({tint: '#006699', Xoffset: 15});
	 })
})